/**
 * form group
 */

.form-horizontal {
	.col-form-label {
		//text-align: right;
	}
}

.form-check {
	.form-check-label {
		margin-top: calc(.5rem + 1px);
		margin-bottom: calc(.5rem + 1px);
	}
}

/*
 * Checkbox and Radio
 */

label {
	&.checkbox, &.radio {
		margin-bottom: 5px;
		padding-left: 24px;
		position: relative;
		display: inline-block;
		line-height: 16px;
		cursor: pointer;
	}
}

.checkbox, .radio {
	input {
		top: 0;
		left: 0;
		margin: 0 !important;
		z-index: 1;
		cursor: pointer;
		@include opacity(0);
		width: $check-radio-width;
		height: $check-radio-width;

		&:checked + .form-control-indicator {
			&:before {
				border-color: $check-radio-select-bg;
				background-color: $check-radio-select-bg;
			}

			&:after {
				@include opacity(1);
			}
		}

		&:disabled {
			& ~ .form-control-indicator {
				@include opacity(.6);
			}

			& ~ span {
				cursor: not-allowed;
				color: lighten($font-color-base, 40%);
			}
		}
	}

	.form-control-indicator {
		&:before, &:after {
			transition: all;
			transition-duration: 250ms;
			backface-visibility: hidden;
			position: absolute;
			content: "";
		}

		&:before {
			top: 0;
			left: 0;
			width: $check-radio-width;
			height: $check-radio-width;
			border: 2px solid $check-radio-border-color;
		}
	}
}

.checkbox {
	input {
		&:checked + .form-control-indicator {
			&:after {
				@include scale-rotate(1, -50deg);
			}
		}
	}

	.form-control-indicator {
		&:before {
			@include border-radius(2px);
		}

		&:after {
			width: 12px;
			height: 7px;
			border-bottom: 3px solid $check-radio-select-color;
			border-left: 3px solid $check-radio-select-color;
			border-bottom-left-radius: 2px;
			left: 2px;
			top: 3px;
			@include scale-rotate(0, -50deg);

		}
	}
}

.radio {
	input {
		&:checked + .form-control-indicator {
			&:after {
				@include scale-rotate(1, -50deg);
			}
		}
	}

	.form-control-indicator {
		&:before {
			@include border-radius(50%);
		}

		&:after {
			background: #fff;
			width: 8px;
			height: 8px;
			border-radius: 50%;
			left: 4px;
			top: 4px;
			@include scale(0);
		}
	}
}

.custom-control-input {
	position: absolute;
	z-index: -1; // Put the input behind the label so it doesn't overlay text
	opacity: 0;

	&:checked ~ .custom-control-indicator {
		color: $custom-control-checked-indicator-color;
		background-color: $custom-control-checked-indicator-bg;
	}
	&:focus ~ .custom-control-indicator {
		// the mixin is not used here to make sure there is feedback
		box-shadow: $custom-control-focus-indicator-box-shadow;
	}
	&:active ~ .custom-control-indicator {
		color: $custom-control-checked-indicator-color;
		background-color: $custom-control-checked-indicator-bg;
	}

}